const path = require('path')
//自动生成 文件打包引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
//压缩和抽离css 
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

//toml yaml json5 使用，json是默认可处理的
const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');
module.exports = {
    //关闭性能检测
    performance: {
        hints: false
    },
    entry:{
        path:'./src/index.js'
    },

    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist'),
        clean:true,
        assetModuleFilename:'images/[contenthash][ext][query]'
    },
    //!生产环境
    // mode: 'development',
    mode: 'production',
    //!用来配置打包模式
    devtool: 'inline-source-map',
    
    plugins: [
        // 实例化 html-webpack-plugin 插件
        new HtmlWebpackPlugin({
            favicon: './src/favicon.ico',
            title: 'myApp',
            template: './index.html', // 打包生成的文件的模板
            filename: 'app.html', // 打包生成的文件名称。默认为index.html
            // 设置所有资源文件注入模板的位置。可以设置的值
            //true|'head'|'body'|false，默认值为 true
            inject: 'body',
        }),

        //抽离合并css
        new MiniCssExtractPlugin({
            filename: 'styles/[contenthash].css'
        }),
    ],

    //配置webpack-dev-server
    devServer:{
        static:'./dist'
    },

    // 配置资源文件
    module: {
        rules: [
            {
                test: /\.(png|jfif)/,
                type: 'asset/resource',
                generator:{ //!配置文件输出路径及其文件名，优先级高于output配置中的配置
                    filename: 'images/[contenthash][ext][query]'
                }},
            {
                test:/\.jpg/,
                type: 'asset/inline',},
            {
                test:/\.txt/,
                type: 'asset/source',},
            {
                test:/\.jpeg/,
                type: 'asset',
                parser: { //!当文件小于2000kb 就通过inline方式打包，否则就通过resource方式编码打包
                    dataUrlCondition:{
                        maxSize: 2000 * 1024
                    }
                }},
            //! loader 的使用
            //lamb 加载css
             {
               test:/\.(css|less)$/,
               use:[MiniCssExtractPlugin.loader, 'css-loader','less-loader'],//todo .css 文件先通过css-loader精选预处理，之后啊通过style-loader进行处理
            },
            //lamb 加载fonts 字体
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
            },
            //lamb CSV XMl文件的加载
            {
                test: /\.(csv|tsv)$/i,
                use: ['csv-loader'],
            },
            {
                test: /\.xml$/i,
                use: ['xml-loader'],
            },

            //lamb toml ，yaml json5 使用
            {
                test: /\.toml$/i,
                type: 'json',
                parser: {
                parse: toml.parse,
                },
            },
            {
                test: /\.yaml$/i,
                type: 'json',
                parser: {
                    parse: yaml.parse,
                },
            },
            {
                test: /\.json5$/i,
                type: 'json',
                parser: {
                    parse: json5.parse,
                },
            },

            //babel-loader
            {
                test: /\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env'],
                        plugins:[
                            [
                                '@babel/plugin-transform-runtime'
                            ]
                        ]
                    }
                }
            },
            
        ]
    },

    //! 优化配置
    optimization: {
        //压缩css 代码
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
        
    
}